<template>
  <xt-drawer :title="setI18n('setting.title')" v-model="visible" :before-close="close">
    <el-form label-width="120px">
      <el-row :gutter="24">
        <setting-language />
        <setting-font />
        <setting-size />
      </el-row>
    </el-form>
  </xt-drawer>
</template>

<script lang="ts">
export default {
  name: "SystemSettingDrawer",
};
</script>

<script lang="ts" setup>
import { ref } from "vue";
import SettingLanguage from "./language.vue";
import SettingFont from "./font.vue";
import SettingSize from "./size.vue";

import { useLocalI18n } from "@/locales/i18n";
const { setI18n } = useLocalI18n();

const visible = ref<boolean>(false);
// 打开抽屉
const open = () => {
  visible.value = true;
};

const close = () => {
  visible.value = false;
};

defineExpose({
  open,
});
</script>
